<template>
  <div class="basic-components">
    <div class="component-container">
      <!-- 搜索栏 -->
      <div class="search-section">
        <el-input
          v-model="searchText"
          placeholder="搜索基本组件..."
          size="large"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <!-- 组件网格 -->
      <div class="components-grid">
        <el-row :gutter="24">
          <el-col
            :xl="6" :lg="8" :md="12" :sm="24"
            v-for="component in filteredComponents"
            :key="component.id"
          >
            <el-card class="component-card" shadow="hover">
              <div class="component-header">
                <div class="component-icon" :style="{background: component.color}">
                  <el-icon :size="28">
                    <component :is="component.icon"/>
                  </el-icon>
                </div>
                <div class="component-info">
                  <h3>{{ component.name }}</h3>
                  <p>{{ component.description }}</p>
                </div>
              </div>
              
              <div class="component-tags">
                <el-tag v-for="tag in component.tags" :key="tag" size="small">
                  {{ tag }}
                </el-tag>
              </div>
              
              <div class="component-actions">
                <el-button type="primary" size="small" @click="viewComponent(component)">
                  <el-icon><View /></el-icon>
                  查看示例
                </el-button>
                <el-button size="small" @click="copyCode(component)">
                  <el-icon><CopyDocument /></el-icon>
                  复制代码
                </el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Search, View, CopyDocument,
  Grid, List, Menu, Fold, Expand,
  Plus, Edit, Delete, Star, Bell
} from '@element-plus/icons-vue'

const searchText = ref('')

// 基本组件数据
const components = ref([
  {
    id: 1,
    name: 'Button 按钮',
    description: '常用的操作按钮组件',
    icon: 'Plus',
    color: 'linear-gradient(135deg, #409EFF, #36CFC9)',
    tags: ['基础', '交互', '表单'],
    code: '<el-button type="primary">主要按钮</el-button>'
  },
  {
    id: 2,
    name: 'Input 输入框',
    description: '通过鼠标或键盘输入字符',
    icon: 'Edit',
    color: 'linear-gradient(135deg, #67C23A, #85CE61)',
    tags: ['表单', '输入', '基础'],
    code: '<el-input v-model="input" placeholder="请输入内容"></el-input>'
  },
  {
    id: 3,
    name: 'Table 表格',
    description: '用于展示多条结构类似的数据',
    icon: 'Grid',
    color: 'linear-gradient(135deg, #E6A23C, #F7BA2A)',
    tags: ['数据', '展示', '表格'],
    code: '<el-table :data="tableData"><el-table-column prop="name" label="姓名"></el-table-column></el-table>'
  },
  {
    id: 4,
    name: 'Card 卡片',
    description: '将信息聚合在卡片容器中展示',
    icon: 'List',
    color: 'linear-gradient(135deg, #F56C6C, #FF7875)',
    tags: ['容器', '展示', '布局'],
    code: '<el-card class="box-card"><div>卡片内容</div></el-card>'
  },
  {
    id: 5,
    name: 'Menu 导航菜单',
    description: '为网站提供导航功能的菜单',
    icon: 'Menu',
    color: 'linear-gradient(135deg, #909399, #B3B3B3)',
    tags: ['导航', '菜单', '布局'],
    code: '<el-menu><el-menu-item index="1">菜单项</el-menu-item></el-menu>'
  },
  {
    id: 6,
    name: 'Collapse 折叠面板',
    description: '通过折叠面板收纳内容区域',
    icon: 'Fold',
    color: 'linear-gradient(135deg, #722ED1, #B37FEB)',
    tags: ['容器', '折叠', '导航'],
    code: '<el-collapse><el-collapse-item title="面板标题">面板内容</el-collapse-item></el-collapse>'
  }
])

// 过滤组件
const filteredComponents = computed(() => {
  if (!searchText.value) {
    return components.value
  }
  return components.value.filter(component =>
    component.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
    component.description.toLowerCase().includes(searchText.value.toLowerCase()) ||
    component.tags.some(tag => tag.toLowerCase().includes(searchText.value.toLowerCase()))
  )
})

// 查看组件
const viewComponent = (component) => {
  ElMessage.info(`正在查看 ${component.name} 组件示例`)
}

// 复制代码
const copyCode = async (component) => {
  try {
    await navigator.clipboard.writeText(component.code)
    ElMessage.success('代码已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}

onMounted(() => {
  // 组件初始化逻辑
})
</script>

<style scoped lang="scss">
.basic-components {
  padding: 32px;
  
  .component-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-section {
    margin-bottom: 32px;
    
    .el-input {
      max-width: 400px;
    }
  }
  
  .components-grid {
    .component-card {
      margin-bottom: 24px;
      border-radius: 16px;
      border: 1px solid #f0f2f5;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        border-color: #409EFF;
      }
      
      .component-header {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        
        .component-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16px;
          color: white;
          flex-shrink: 0;
        }
        
        .component-info {
          flex: 1;
          
          h3 {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            margin: 0 0 8px 0;
          }
          
          p {
            font-size: 14px;
            color: #606266;
            margin: 0;
            line-height: 1.5;
          }
        }
      }
      
      .component-tags {
        margin-bottom: 20px;
        
        .el-tag {
          margin-right: 8px;
          margin-bottom: 6px;
          background: rgba(64, 158, 255, 0.1);
          border-color: rgba(64, 158, 255, 0.2);
          color: #409EFF;
        }
      }
      
      .component-actions {
        display: flex;
        gap: 12px;
        
        .el-button {
          flex: 1;
          border-radius: 8px;
          
          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .basic-components {
    padding: 16px;
    
    .search-section {
      .el-input {
        max-width: 100%;
      }
    }
    
    .component-actions {
      flex-direction: column;
      
      .el-button {
        width: 100%;
        margin: 0 0 8px 0;
      }
    }
  }
}
</style>
